<template>
  <el-dialog
    :visible.sync="visible"
    width="60%"
    :before-close="handleClose"
  >
    <h1 v-if="isAudit"><i class="el-icon-s-check"/> {{ title }}</h1>
    <h1 v-if="!isAudit"><i class="el-icon-view"/> {{ title }}</h1>
    <el-card class="box-card">
      <el-form ref="formRef" :model="formData" label-position="top" status-icon label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" maxlength="30" clearable placeholder="请输入标题" show-word-limit disabled/>
        </el-form-item>
        <!-- 下拉列表 选择框 -->
        <el-form-item label="类型" prop="original">
          <el-select v-model="formData.original" placeholder="请选择" prop="original" disabled>
            <el-option label="原创" value="0"/>
            <el-option label="转载" value="1"/>
            <el-option label="翻译" value="2"/>
          </el-select>
        </el-form-item>
        <!-- 下拉列表 选择框 -->
        <el-form-item label="可否转载" prop="refuse">
          <el-select v-model="formData.refuse" placeholder="请选择" prop="refuse" disabled>
            <el-option label="可转载" value="0"/>
            <el-option label="转载请注明出处" value="1"/>
            <el-option label="未经作者授权，禁止转载" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="文章分类">
          <!-- 一级分类 -->
          <el-select
            disabled
            value
          >
            <el-option
              value
              :label="formData.categoryParentName"
            />
          </el-select>
          <!-- 二级分类 -->
          <el-select
            disabled
            value
          >
            <el-option
              value
              :label="formData.categoryName"
            />
          </el-select>
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item label="正文内容" prop="content">
          <el-tiptap
            v-model="formData.content"
            readonly
            :extensions="extensions"
            height="800px"
            placeholder="请您确保输入的内容，文明、没有版权纠纷！"
          />
        </el-form-item>
        <!-- 上传经历头像 -->
        <el-form-item label="经历主人形象照片" prop="masterUrl">
          <el-upload
            disabled
            class="avatar-uploader"
            action=""
            accept="image/*"
            :show-file-list="false"
          >
            <!-- 如果有图片，显示图片 -->
            <img v-if="formData.masterUrl" :src="formData.masterUrl" class="avatar" alt="">
            <!-- 如果没有图片，显示那个 + 号，底下的样式就是 + 号 加边框 -->
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="经历主人姓名" prop="masterName">
          <el-input
            v-model="formData.masterName"
            clearable
            show-word-limit
            disabled
          />
        </el-form-item>
        <el-form-item label="留言区" prop="commentClose">
          <el-select v-model="formData.commentClose" placeholder="请选择" disabled>
            <el-option label="开启" :value="false"/>
            <el-option label="关闭" :value="true"/>
          </el-select>
        </el-form-item>
        <!-- 审核不通过的原因：(0 无；1 作品侵权；2 涉嫌违法；3 内容不雅；4 骚扰谩骂；5 虚假宣传；6 低质灌水；7 不符合当前分类 ) -->
        <el-form-item v-if="isAudit" label="审核结果" prop="fail">
          <el-radio-group v-model="formData.fail">
            <!-- <el-radio-button :label="0">无</el-radio-button>-->
            <el-radio-button :label="1">作品侵权</el-radio-button>
            <el-radio-button :label="2">涉嫌违法</el-radio-button>
            <el-radio-button :label="3">内容不雅</el-radio-button>
            <el-radio-button :label="4">骚扰谩骂</el-radio-button>
            <el-radio-button :label="5">虚假宣传</el-radio-button>
            <el-radio-button :label="6">低质灌水</el-radio-button>
            <el-radio-button :label="7">不符合当前分类</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <br>
        <br>
        <br>
        <el-form-item v-if="isAudit" align="center">
          <el-button v-permission="'article:audit'" type="success" @click="auditSuccess(formData.id)">审核通过</el-button>
          <el-button v-permission="'article:audit'" type="danger" @click="auditNoPass(formData.id,formData.fail)">
            审核不通过
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-dialog>
</template>
<script>
import api from '@/api/article'
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Italic,
  FontSize,
  TextAlign,
  TextHighlight,
  Strike,
  Underline,
  FontType,
  ListItem,
  Link,
  Image,
  CodeBlock,
  Blockquote,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  Indent,
  LineHeight,
  HorizontalRule,
  HardBreak,
  TrailingNode,
  History,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  FormatClear,
  TextColor,
  Preview,
  Fullscreen
} from 'element-tiptap'
import 'element-tiptap/lib/index.css'

export default {
  name: 'Audit',
  // 接收父组件传值
  props: ['title', 'visible', 'id', 'isAudit'],
  components: {
    'el-tiptap': ElementTiptap
  },
  data() {
    return {
      formData: {}, // 查询到的文章详情
      categoryList: [], // 一级分类
      categoryTwoList: [], // 二级分类
      // 编辑器的 extensions
      // 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }),
        new Underline({
          bubble: true,
          menubar: false
        }),
        new Italic(),
        new FontSize(),
        new FontType(),
        new TextColor(),
        new TextHighlight(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new TodoItem(),
        new TodoList(),
        new Image(),
        new Link(),
        new TextAlign(),
        new Indent(),
        new LineHeight(),
        new HorizontalRule(),
        new HardBreak(),
        new TrailingNode(),
        new History(),
        new Table(),
        new TableHeader(),
        new TableCell(),
        new TableRow(),
        new FormatClear(),
        new Fullscreen(),
        new Preview(),
        new CodeBlock(),
        new Blockquote()
      ]
    }
  },
  watch: {
    // 监听 visible 的变化，值改变，便调用根据文章ID查询文章详情方法
    visible(val) {
      if (val) {
        this.getById()
      }
    }
  },
  methods: {
    // 关闭审核窗口
    handleClose() {
      // 触发父组件关闭窗口方法
      this.$emit('remoteClose')
    },
    // 根据id查询文章详情
    getById() {
      api.getById(this.id).then(response => {
        if (response.code === 200) {
          this.formData = response.data.article
        }
      })
    },
    // 审核通过
    auditSuccess(id) {
      this.$confirm('确定文章 审核通过 吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        api.auditPass(id).then(response => {
          if (response.code === 200) {
            // 调用关闭窗口方法
            this.handleClose()
            this.$message.success(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    // 审核不通过
    auditNoPass(id, fail) {
      if (fail === '' || fail === undefined) {
        this.$message.error('请选择审核不通过的原因')
        return
      }
      this.$confirm('确定文章 审核不通过 吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求
        api.auditNoPass(id, fail).then(response => {
          if (response.code === 200) {
            // 调用关闭窗口方法
            this.handleClose()
            this.$message.info(response.message)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style>

.el-dialog {
  border-radius: 4px;
}

h1 {
  text-align: center;
  margin-bottom: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
